<template>
    <!-- 整个页面的容器，是灰色的背景 -->
    <div class="cartPageWrap" :style="{height: pageHeight + 'px'}">
        
        <!-- 购物车页面的title -->
        <div class="cartTitle">
            <h1>购物车</h1>
            <span @click="editBtnEvent">{{ editBtn }}</span>
        </div>

        <!-- 商品列表，开始 -->
        <div class="shopInfoBox">
            <!-- 全选按钮 -->
            <h1>
                <van-checkbox v-model="allGoodsChecked" @click="allGoodsCheckedEventFn">
                    <div class="allGoodsCheckBoxIcon">华为商城自营</div>
                </van-checkbox> 
            </h1>
        </div>

        <!-- 限时特惠 -->
        <div class="limitTime">
            <em>限时特惠</em>
            <span>距离活动结束还有</span>
            <van-count-down :time="limitTime" style="float:left"/>
        </div>

        <h1 v-show="isShopCartEmpty">购物车中没有商品，请添加购物车</h1>

        <!-- 购物车中的商品列表 -->
        <div class="goodsPanels">
            <!-- 单个的某个商品 -->
            <div class="goodsItem" v-for="n in getAllGoods.arr" :key=n.goods_key>
                <!-- <h1>{{n.is_checkbox}}</h1> -->
                <!-- vant的单个商品的复选框 -->
                <!-- <van-checkbox v-model="allGoodsChecked" style="float:left; margin: .7rem 0 0 0" shape="square" /> -->
                <!-- 在shopping_cart表中，添加一个某个商品是否选中的字段：is_checkbox，0/1 -->
                <vantCheckBoxItem 
                    @editAllGoodsCheckFn="allGoodsCheckedFn" 
                    :is_checkbox="n.is_checkbox" 
                    :goods_key="n.goods_key" 
                    @childrenAgainEmit="ageinGetAllGoodsFn"
                    v-show="isVantCheckBoxItemShow"
                />

                <!-- 测试编辑商品的按钮 -->
                <input 
                    v-show="isDelEditInputShow" 
                    :data-editKey="n.goods_key"
                    @click="editGoodsCheckboxKeyFn"
                    type="checkbox" 
                    style="float:left; margin:1rem .3rem 0 0;"
                >

                <span class="goodsImg">
                    <img :src="n.goods_img" alt="">
                </span>
                <!-- 产品信息，开始 -->
                <div class="goodsInfo">
                    <p class="p1">{{ n.goods_title }}</p>
                    <p class="p2"> {{ n.goods_des }}</p>
                    <div class="priceLine">
                        <span style="float: left">￥{{n.goods_price }}</span>
                        <del style="float: left; margin-top: .06rem;">￥8988</del>
                        <span style="float: right">
                            <!-- <van-stepper v-model="shoppingStepperVal" @change="shoppingNumChangeFn" /> -->
                            <addAndMinusBtn 
                                :goods_key="n.goods_key" 
                                :goods_num="n.goods_num" 
                                @change="shoppingNumChangeFn()"
                                @getTotalMoney_goodsNum="getTotalMoney_goodsNum"
                                >
                            </addAndMinusBtn>
                        </span>
                    </div>
                </div>
                <!-- 产品信息，结束 -->
                <!-- 优惠、服务、赠品，开始 -->
                <!-- <div class="otherInfo">
                    <span>【优惠】</span>
                    <p>分期免息</p>
                </div>
                <div class="otherInfo">
                    <span>【服务】</span>
                    <p>碎屏宝</p>
                    <em>选购 > </em>
                </div>
                <div class="otherInfo">
                    <span>【赠品】</span>
                    <ul>
                        <li class="icon_1">HUAWEI P50 Pocket 智能主题保护壳 浩瀚宇宙（浩瀚黑）</li>
                        <li class="icon_2">华为充电器SuperCharge快充版（Max 40W）</li>
                    </ul>
                </div> -->
                <!-- 优惠、服务、赠品，结束 -->

            </div>
        </div>
        <!-- 商品列表，结束 -->

        <!-- 底部，总计栏，开始 -->
        <div class="totalWrap" v-show="isTotalWrapShow">
            <van-checkbox v-model="allGoodsChecked" @click="allGoodsCheckedEventFn" class="allCheckFooter">
                <div>全选</div>
            </van-checkbox> 
            <div class="priceNumber">
                <label>总计：</label>
                <em>¥</em>
                <span>{{totalMoney_goodsNum.arr.money}}</span>
            </div>
            <van-button class="payButton" round type="danger" to="/confirmOrder">结算{{totalMoney_goodsNum.arr.num}}</van-button>
        </div>
        <!-- 底部，总计栏，结束 -->

        <!-- 底部，删除商品栏，开始 -->
        <div class="totalWrap" v-show="isDelGoodsShow">
            <van-checkbox class="allCheckFooter">
                <div>全选</div>
            </van-checkbox> 

            <van-button round type="danger" @click="delGoodsKeyBtnFn" style="float: right; margin-right: .5rem;">删除</van-button>
        </div>
        <!-- 底部，删除商品栏，结束 -->
    </div>

    <!-- footer底部导航栏 -->
	<footerTabber ref="sonRef" />
</template>

<script setup>
import requestFn from '@/utils/https';
import { getFn, postFn } from '@/utils/index';
import {ref, reactive, nextTick} from 'vue'
import footerTabber from '@/components/footerTabber'
import addAndMinusBtn from '@/components/addAndMinusBtn'
import vantCheckBoxItem from '@/components/vantCheckBoxItem'

// 获取当前页面的高度
let pageHeight = document.documentElement.clientHeight;
// console.log( pageHeight )

// 1、新加一个接口：mysql_getAllGoodsCheck，获取、保存全选按钮的状态
// 2、新加一个表，all_goods_check_state，字段：ischeck；默认值1，选中状态
// 3、单独建一个表，不要跟购物车商品或其它的，混在一起，不好维护

// 全选按钮
const allGoodsChecked = ref(true)

// 页面加载时，读取全选按钮的状态，渲染到页面，是选中还是未选中
const allGoodsCheckedFn = () => {
    requestFn({
        url: '/mysql_getAllGoodsCheck',
        method: 'get'
    }).then(res => {
        // console.log(res)
        allGoodsChecked.value = res.data[0].ischeck
    })
}
allGoodsCheckedFn()

// 购物车中没有商品时的显示
let isShopCartEmpty = ref(false)



// 页面刚打开时，从mysql中加载商品的数量
// 从shopping_cart购物车表中，取得所有商品信息
let getAllGoods = reactive({
    arr: []
})
requestFn({
    url: '/mysql_getShoppingGoodsInfo',
    method: 'get'
}).then( res => {
    // console.log(res.data)
    getAllGoods.arr = res.data.goodsObj
    // shoppingStepperVal.value= res.data.num
})

// 全选按钮的单击事件
const allGoodsCheckedEventFn = () => {
    // console.log(allGoodsChecked.value)

    let _o = allGoodsChecked.value === true ? 1 : 0
    // console.log(_o)

    // requestFn({
    //     url: '/mysql_getAllGoodsCheck',
    //     method: 'get',
    //     data: { n: _o }
    // })

    /* 【全选按钮的思路】：
    1、当点击全选按钮时，把所有商品的checkbox的值，改为1或0
    2、让shopping_cart表中所有商品的is_checkbox字段的值，与全选的值相同
    3、每个接口只做一件事，那么，新建接口：mysql_editAllCheckBox
    4、咱们现在先单独写ajax之类的请求，先不用 Promise 来封装ajax的嵌套，
    咱们一件事一件事的解决，目前是先解决业务逻辑，把逻辑写通
    */
    // requestFn({
    //     url: '/mysql_editAllCheckBox',
    //     method: 'get',
    //     data: { n: _o }
    // }).then(() => {
        
    //     // 然后，再见从 shopping_cart 购物车表中，取得所有商品的被修改之后的，is_checkbox
    //     requestFn({
    //         url: '/mysql_getShoppingGoodsInfo',
    //         method: 'get'
    //     }).then( res => {
    //         // console.log(res.data)
    //         getAllGoods.arr = res.data.goodsObj
    //     })
    // })
    getFn('/mysql_getAllGoodsCheck', { n: _o })
        .then( res => {
            return getFn('/mysql_editAllCheckBox' , { n: _o })
        }).then( res => {
            return getFn('mysql_getShoppingGoodsInfo')
        }).then( res => {
            // console.log(res.data)
            getAllGoods.arr = res.data.goodsObj
        })
}

// 从 shopping_cart 购物车表中，取得所有商品的被修改之后的，is_checkbox
// 由每个商品左侧的复选框按钮触发，是子组件通过自定义事件来触发的
// 思路，在父组件，先在页面上输出{{n.is_checkbox}}，看看页面上这个数字是否有变化
// 来判断数据是否有变化，导致页面没有重新渲染
const ageinGetAllGoodsFn = () => {
    getFn('/mysql_getShoppingGoodsInfo').then(_d => {
        // console.log( _d.data )
        getAllGoods.arr = _d.data.goodsObj
    });
}


// ==============================================
// Promise测试，解决回调地狱
// getFn('/mysql_getShoppingGoodsInfo')
//     .then( res => {
//         console.log(res.data)
//         return getFn('/goodsTypeData')
//     }).then( res => {
//         console.log(res.data)
//         return getFn('/swipeData')
//     }).then( res => {
//         console.log(res.data)
//     })

// 限时特惠倒计时
const limitTime = ref(24 * 60 * 60 * 1000);

// 商品加减按钮的值
// let shoppingStepperVal = ref(0)

// 子组件的调用
const sonRef = ref()

// 结算按钮栏的所有商品数量、总价
// 计算所有商品的总数、总价
// 请求接口，可以使用接口，mysql_getShoppingGoodsInfo
// 但是原则是，每个接口，只做一件事
// 所以咱们新增一个接口，mysql_getGoodsMoney
let totalMoney_goodsNum = reactive({
    arr: []
})

// 从子组件传值过来
const getTotalMoney_goodsNum = (res) => {
    // console.log(res)
    totalMoney_goodsNum.arr = res
}

// 页面一打开，就直接请求所有商品数量、总价
requestFn({
    url: '/mysql_getGoodsMoney',
    method: 'get'
}).then( res => {
    // console.log(res)
    totalMoney_goodsNum.arr = res.data
})

// 加减号按钮change事件
const shoppingNumChangeFn = () => {
    // console.log(e)

    // 直接这么去请求、计算所有商品的总数、总价，有一个顺序的问题
    // 你可能拿到的是db修改之前的数据，
    // 因为它是加减号触发的
    // requestFn({
    //     url: '/mysql_getGoodsMoney',
    //     method: 'get'
    // }).then(_d => {
    //     // console.log(_d.data)
    //     totalMoney_goodsNum.arr = _d.data
    // }) 

    // 调用子组件的方法
    nextTick(() => {
        // console.log(sonRef)
        sonRef.value.sonFn()
    })

    // 请求产品数量加减号接口
    // requestFn({
	// 	url: '/stepper_num',
	// 	method: 'get',
	// 	data: { n: e, m: 0 }
	// }).then(() => {
		
    //     // 代码冗余，先不管，先实现逻辑，验证思路
    //     // 自动更新购物车图标右上角的红圈数字，重新获取计算之后的新值
	// 	requestFn({
	// 		url: '/mysql_getStepperNum',
	// 		method: 'get'
	// 	}).then( res => {
	// 		// console.log(res);
	// 		shoppingStepperVal.value = res.data[0].num
	// 	})
	// })
}

// 购物车title右侧的编辑按钮
let editBtn = ref('编辑')
// 文件切换标识 
let _isTitleEditFont = false
// 底部footer, 结算栏, 显示隐藏。默认显示，true
let isTotalWrapShow = ref(true)
// 底部footer，删除商品栏，显示、隐藏。默认隐藏，false
let isDelGoodsShow = ref(false)
// 单个商品左边的复选框，当点击title右上角“编辑”按钮时，隐藏。默认显示，true
let isVantCheckBoxItemShow = ref(true)
// 单个商品左边的，点击title右上角“编辑”按钮时，显示。默认隐藏，false
let isDelEditInputShow = ref(false)

// 点击编辑事件
const editBtnEvent = () => {
    _isTitleEditFont = !_isTitleEditFont
    isTotalWrapShow.value = !isTotalWrapShow.value
    isDelGoodsShow.value = !isDelGoodsShow.value
    isVantCheckBoxItemShow.value = !isVantCheckBoxItemShow.value
    isDelEditInputShow.value = !isDelEditInputShow.value
    _isTitleEditFont === true ? editBtn.value = '完成' : editBtn.value = '编辑'
}

// 点击右上角编辑按钮时，商品左侧的checkbox按钮可以显示，并触发事件
const editGoodsCheckboxKeyFn = (e) => {
    // console.log(e.target)
    let _key = e.target.getAttribute('data-editkey')
    // console.log(_key)
    // 要把多个商品的key，保存在一个数组里，传入中间件，拼接sql语句，操作db，修改数据
    editGoodsArr(_key)
}

// 判断要删除的商品的数组中，有没有你要是新加入的商品的key？
// 没有，才能添加；如果有，要删除；
// 同学们注意，这不是数组去重的需求。
// 点击右上角的编辑按钮，保存要删除的商品的key的数组
let editDelGoodsKeyArr = []
const editGoodsArr = (_key) => {
    // console.log(typeof _key)
    // 用findIndex()来判断，返回传入一个测试条件（函数）符合条件的数组第一个元素位置
    // 如果没有符合条件的元素返回 -1
    let _is = editDelGoodsKeyArr.findIndex( n => {
        return n === _key
    })
    // console.log(_is)

    // _is 等于-1，就是数组中，没有这个_key，可以push
    if(_is < 0) {
        editDelGoodsKeyArr.push(_key)
    } else {
        // _is，大于或等于0，就是数组中已经存在某个商品的key，就删除这个key
        // 删除数组中的元素，用.splice，可以向数组中添加、或删除项目
        // .splice，第一个参数是要添加、删除的项目，第二个是删除几个
        editDelGoodsKeyArr.splice(_is, 1)
    }
    // console.log(editDelGoodsKeyArr)
}

// 点击右上角编辑按钮之后，选择要删除的商品
// 把它们的key，保存在数组editDelGoodsKeyArr中
// 点击右下角删除按钮，请求接口，修改db，更新页面
const delGoodsKeyBtnFn = () => {
    // console.log(editDelGoodsKeyArr)

    // 请求接口，根据key删除shopping_cart表中的商品数据
    // requestFn({
    //     url: '/mysql_delShopping_cartGoods',
    //     method: 'get',
    //     data: { n: editDelGoodsKeyArr }
    // }).then(() => {
    //     // 再次从mysql中加载商品的数量
    //     // 从shopping_cart购物车表中，取得所有商品信息
    //     requestFn({
    //         url: '/mysql_getShoppingGoodsInfo',
    //         method: 'get',
    //     }).then( res => {
    //         getAllGoods.arr = res.data.goodsObj
    //     })
    // })

    // 改为Promise形式，解决回调地狱
    getFn('/mysql_delShopping_cartGoods', { n: editDelGoodsKeyArr }) 
        .then( () => {
            return getFn('/mysql_getShoppingGoodsInfo')
        })
        .then( res => {
            getAllGoods.arr = res.data.goodsObj
            editBtn.value = '编辑'
            isDelGoodsShow.value = false
            isTotalWrapShow.value = true

            if(res.data.goodsObj.length === 0) {
                isShopCartEmpty.value = true
            }
      
            // 单个商品左边的，点击title右上角“编辑”按钮时，显示。默认隐藏，false
            isDelEditInputShow.value = false
            // 退出编辑按钮时的，左侧商品的复选框
            isVantCheckBoxItemShow.value = true

            // 调用了子组件footerTabbar.vue的方法
            nextTick(() => {
                console.log(sonRef)
                sonRef.value.sonFn()
            })
        })
}

</script>

<style lang="less" scoped>
/* 整个页面的容器，是灰色的背景 */
.cartPageWrap{
    background: #f1f3f5;
    margin-bottom: 1.5rem;
    /* 购物车页面的title */
    .cartTitle{
        clear: both;
        overflow: hidden;
        padding: .2rem .5rem;
        h1 {
            float: left;
            font-size: .7rem;
        }
        span {
            float: right;
            font-size: .4rem;
            margin-top: .2rem;
        }
    }
    /* 商品列表 */
    .shopInfoBox{
        margin: 0 .4rem;
        background: #fff;
        padding: .3rem;
        border-radius: .3rem;
        .allGoodsCheckBoxIcon{
            background-image: url('https://res.vmallres.com/uomcdn/CN/sc/shop/VMALL-HUAWEIDEVICE/202203/90BC709CA0BD01DA1DDFA510535ACE6A.png');
            background-size: .55rem;
            line-height: .55rem;
            background-repeat: no-repeat;
            padding: 0 0 0 .7rem;
            margin: .3rem 0;
        }
    }
    /* 限时特惠 */
    .limitTime{
        clear: both;
        overflow: hidden;
        padding: 0 0 0 .3rem;
        margin: .3rem .5rem;
        background-image: url('');
        background-repeat: no-repeat;
        background-size: .25rem;
        em {
            float: left;
            margin-right: .2rem;
            font-size: .4rem;
            line-height: .4rem;
        }
        span {
            float: left;
            margin: .09rem .3rem 0 0;
            font-size: .3rem;
            line-height: .3rem;
        }
    }
    /* 购物车中的所有的商品的列表容器 */
    .goodsPanels{
        clear: both;
        overflow: hidden;
        .goodsItem{
            clear: both;
            overflow: hidden;
            margin-left: .6rem;
            .goodsImg{
                float: left;
                width: 2rem;
                height: 2rem;
                overflow: hidden;
            }
            .goodsInfo{
                float: left;
                width: 6rem;
                overflow: hidden;
                .p1 {
                    font-size: .38rem;
                    text-align: left;
                    margin-bottom: .2rem;
                }
                .p2{
                    text-align: left;
                    color: #666;
                    // 溢出隐藏
                    overflow: hidden;
                    // 禁止换行
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-block: .2rem;
                }
                .priceLine{
                    text-align: left;
                    span{
                        color: #f00;
                        font-size: .4rem;
                        margin-right: .2rem;
                    }
                }
            }
            /* 优惠、服务，赠品 */
            .otherInfo {
                clear: both;
                overflow: hidden;
                padding: .3rem 0 0 0;
                margin: .2rem 0 0 .6rem;
                span {
                    float: left;

                }
                p {
                    float: left;
                }
                em{
                    float: right;
                    margin-right: .5rem;
                }
                ul{
                    float: left;
                    width: 6rem;
                    li{
                        text-align: left;
                        margin-bottom: .3rem;
                        padding: 0 0 0 .6rem;
                        /* //溢出隐藏 */
                        overflow: hidden;
                        /* //禁止换行 */
                        white-space: nowrap;
                        /* //... */
                        text-overflow: ellipsis;
                    }
                    .icon_1 {
                        background-image: url('https://res.vmallres.com/pimages/uomcdn/CN/pms/202205/gbom/6941487243853/428_428_E47599189E3AF9836DABF8637A30767Amp.png');
                        background-repeat: no-repeat;
                        background-size: .55rem;
                    }
                    .icon_2{
                        background-image: url('https://res.vmallres.com/pimages/product/6941487208531/428_428_FDA0EDDBE95421AC08DCC5DD197E236CED6ECAB7F1F837C3mp.png');
                        background-repeat: no-repeat;
                        background-size: .55rem;
                    }
                }
            }
        }
    }
    /* 底部footer的产品总计栏 */
    .totalWrap{
        overflow: hidden;
        width: 100%;
        height: 1.3rem;
        background-color: rgba(250,250,250,0.95);
        position: fixed;
        left:0;
        bottom: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .allCheckFooter{
            // float: left;
            // margin: .4rem 0 0 .4rem;
            margin-left: .5rem;
        }
        .priceNumber{
            // float: right;
            font-size: .35rem;
            // margin: .4rem .2rem 0 0;
            margin-left: 2.6rem;
            label{
                font-size: .4rem;
            }
            em {
                font-size: .25rem;
                color: #f00;
            }
            span{
                font-size: .4rem;
                color: #f00;
            }
        }
        .payButton{
            // float: right;
            // margin: 0rem .2rem 0 0;
            margin-right: .5rem;
        }
        .van-button:before ::v-deep {
            top: 50%;
            background: #fff;
        }
    }
}

</style>